<template>
    <div id="ability_analysis">
        <p class="ability_tlt"><span class="ability_title">能力分析</span> <span class="close" @click="$emit('closeAbilityAnalysis')"></span></p>
        <div>
            <div class="character">
                <p>指标分类</p>
                <ul>
                    <li v-for="(item, i) in character" v-if="i === 0" :style="{color: characterIndex === i ? '#4bb6da' : '#fff'}"><span @click="characterIndex = i">{{item.name}}</span></li>
                    <li v-for="(item, i) in character" v-if="i !== 0" style="color: #6d6d6d" ><span>{{item.name}}</span></li>
                </ul>
            </div>
            <div class="character_item">
                <p>列表</p>
                <ul class="classify">
                    <li v-if="i === 0"  @click="addPredictItem(i)" v-for="(item, i) in character[0].option" :style="{color: predictIndex === i ? '#4bb6da' : '#fff'}">
                        <label>{{item.name}}</label>
                    </li>
                    <li v-if="i !== 0" v-for="(item, i) in character[0].option" style="color: #6d6d6d">
                        <label>{{item.name}}</label>
                    </li>
                    <li v-if="characterIndex === 1" v-for="(item, i) in character[1].option" :style="{color: item.val ? '#4bb6da' : '#fff'}">
                        <input type="checkbox" :id="'box' + i" v-model="item.val" :value="item"/>
                        <label :for="'box' + i">{{item.name}}</label>
                    </li>
                </ul>
            </div>
            <p style="clear: both;"></p>
            <ul v-if="predict && !characterIndex" class="predict_pane">
                <li v-for="k in predict">
                    <div>{{k.item}}</div>
                    <div>
                        <el-slider v-if="k.item === '高度'" v-model="k.val" :min="0" :max="20000" :step="100" @change="heightChangeChild"></el-slider>
                        <el-slider  v-if="k.item !== '高度'" v-model="k.val" :min="0" :max="30" :step="0.5" @change="heightChangeChild"></el-slider>
                    </div>
                    <div>
                        {{k.val}} {{k.unit}}
                    </div>
                </li>
            </ul>
        </div>
        <ul class="list-select">
            <li v-for="i of character">
                <i class="iconfont icon-airDefense"></i><span>{{}}</span>
            </li>
        </ul>


    </div>
</template>

<script>
    import Vue from 'vue';
    import {Slider} from 'element-ui';
    Vue.use(Slider);
    export default {
        name: "ability-analysis",
        props: ['AllHeightChange', 'closeAbilityAnalysis'],
        components: {},
        data() {
            return {
                characterIndex: 0,
                character: [
                    {name: '预警探测', option: [
                            {name: '预警探测范围', option: { item: '高度', val: 9000, unit: '米'}},
                            {name: '预警探测面积'/*, option: {item: '雷达截面积', val: 2000, unit: '米'}*/},
                            {name: '可预警目标类型'},
                            {name: '　　　　'}]},
                    {name: '防空反导', option: [{name: '火力覆盖区'}, {name: '反导保卫区'}, {name: '火力密度'}]},
                    {name: '指挥指控', option: []},
                    {name: '先制反制', option: []}
                ],
                characterList: {},
                predict: [
                    { item: '高度', val: 8000, unit: '米'},
                    { item: 'rcs', val: 5, unit: ''}
                ],
                predictIndex: 0,
            }
        },
        mounted() {

        },
        methods: {
            addPredictItem(i) {
                this.predictIndex = i;
                console.log(this.character[this.characterIndex].option[i].option);
                // this.predict = this.character[this.characterIndex].option[i].option;
            },
            heightChangeChild() {
                this.$emit('AllHeightChange', this.predict);
            }
        }
    }
</script>

<style lang="less" type="text/less" scoped>
    @import "abilityAnalysis";
</style>